<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>出所流程图</title>
    <script type="text/javascript">mxBasePath = '../../js/process';</script>
    <script type="text/javascript" src="../../js/process/js/mxClient.js"></script>
    <meta name="Keywords" content="tip tools" />
    <meta name="Description" content="tip tools" />
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <script src="/js/plugins/jquery/jquery-1.9.1.min.js"></script>
    <!--<script type="text/javascript" src="../../js_new/kss_rsdj/rsdj.js"></script>
    <script type="text/javascript" src="../../js_new/kss_rsdj/rsdj_ajax.js"></script>-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/xyy.css">
    <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyloader.js"></script>
    <!--<script type="text/javascript" src="../../js_new/kss_public/jbxxColumns.js"></script>-->
    <script type="text/javascript" src="../js/commonTools.js"></script>
    <script type="text/javascript" src="../js/datagrid-detailview.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
</head>
<body style="background:#f5f5f5">
<div class="easyui-layout"   data-options="fit:true"  style="width: 100%; height:100%; border-right-width: 0px; padding-right: 0px; margin-right: 0px">
    <div  data-options="region:'center',iconCls:'icon-dingdan'," style="width: 100%; height:40%;padding: 0px">
	<span id="pictureId" style="position:absolute ;top:170px;
			background:#ACD6FF;z-index:9999;width:200px;display: none;">
	</span>
        <div id="main" style="height:200px"></div>
    </div>
    <script type="text/javascript">
        var user_permission = 2 ; 	//设置获取到的用户权限
        var rsdj_permission = 2 ;	//设置出所管理需要的权限
        var container = document.getElementById("main");
        var graph = new mxGraph(container);
        var parent = graph.getDefaultParent();
        //设置节点解析html标签
        graph.setHtmlLabels(true);
        // 禁用选择和单元格处理
        graph.setEnabled(false);
        /* style1 */
        //定义节点图片的样式
        var style = {};
        // 克隆一个object
        style = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style = mxUtils.clone(style);
        style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        style[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        // 背景图片宽
        style[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style1", style);
        /* style2 */
        //定义节点图片的样式
        var style2 = {};
        // 克隆一个object
        style2 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style2[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style2 = mxUtils.clone(style);
        style2[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style2[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style2[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style2[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style2[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style2[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style2[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style2[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style2[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        if(user_permission >= rsdj_permission){
            style2[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        }else{
            style2[mxConstants.STYLE_IMAGE] = '../../img/lcth.png';
        }
        // 背景图片宽
        style2[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style2[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style2[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style2[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style2", style);
        /* style3 */
        //定义节点图片的样式
        var style3 = {};
        // 克隆一个object
        style3 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style3[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style3 = mxUtils.clone(style);
        style3[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style3[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style3[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style3[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style3[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style3[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style3[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style3[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style3[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        style3[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        // 背景图片宽
        style3[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style3[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style3[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style3[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style3", style);
        /* style4 */
        //定义节点图片的样式
        var style4 = {};
        // 克隆一个object
        style4 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style4[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style4 = mxUtils.clone(style);
        style4[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style4[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style4[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style4[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style4[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style4[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style4[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style4[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style4[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        if(user_permission >= rsdj_permission){
            style4[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        }else{
            style4[mxConstants.STYLE_IMAGE] = '../../img/lcth.png';
        }
        // 背景图片宽
        style4[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style4[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style4[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style4[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style4", style);



        /* style5*/
        //定义节点图片的样式
        var style5 = {};
        // 克隆一个object
        style5 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style5[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style5 = mxUtils.clone(style);
        style5[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style5[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style5[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style5[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style5[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style5[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style5[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style5[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style5[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        if(user_permission >= rsdj_permission){
            style5[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        }else{
            style5[mxConstants.STYLE_IMAGE] = '../../img/lcth.png';
        }
        // 背景图片宽
        style5[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style5[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style5[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style5[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style5", style);



        /* style6*/
        //定义节点图片的样式
        var style6 = {};
        // 克隆一个object
        style6 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style6[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style6 = mxUtils.clone(style);
        style6[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style6[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style6[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style6[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style6[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style6[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style6[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style6[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style6[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        if(user_permission >= rsdj_permission){
            style6[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        }else{
            style6[mxConstants.STYLE_IMAGE] = '../../img/lcth.png';
        }
        // 背景图片宽
        style6[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style6[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style6[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style6[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style6", style);


        /* style7*/
        //定义节点图片的样式
        var style7 = {};
        // 克隆一个object
        style7 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
        style7[mxConstants.STYLE_ROUNDED] = true;//圆角连线
        style7 = mxUtils.clone(style);
        style7[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来
        // 边框颜色
        style7[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';
        //节点的背景色
        style7[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';
        // 字体颜色
        style7[mxConstants.STYLE_FONTCOLOR] = 'black';
        // 文字水平方式
        style7[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style7[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style7[mxConstants.STYLE_FONTSIZE] = 13;
        // 底图水平对齐
        style7[mxConstants.STYLE_IMAGE_ALIGN] = 0;
        // 底图垂直对齐
        style7[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;
        // 图片路径
        if(user_permission >= rsdj_permission){
            style7[mxConstants.STYLE_IMAGE] = '../../img/lct.png';
        }else{
            style7[mxConstants.STYLE_IMAGE] = '../../img/lcth.png';
        }
        // 背景图片宽
        style7[mxConstants.STYLE_IMAGE_WIDTH] = 80;
        // 背景图片高
        style7[mxConstants.STYLE_IMAGE_HEIGHT] = 80;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style7[mxConstants.STYLE_SPACING_TOP] = 30;
        // 四边间距设置
        style7[mxConstants.STYLE_SPACING] = 0.5;
        // 把定义好的样式object push到stylesheet
        graph.getStylesheet().putCellStyle("style7", style);





        //获取流程节点的待办数量
        var wpthCount=0;
        var xjthCount=0;
        var wjpjcCount=0;

        // 画人物
        var v1 = graph.insertVertex(parent, 'csdj', '出所登记<font color="red"></font>', 200, 250, 100, 105, "style1");

        var v2 = graph.insertVertex(parent, 'wpth', '物品退还<font color="red">（ '+wpthCount+' ）</font>', 460, 10, 100, 105, "style2");
        var v3 = graph.insertVertex(parent, 'xjth', '现金退还<font color="red">（ '+xjthCount+' ）</font>', 460, 140, 100, 105,"style3");
        var v4 = graph.insertVertex(parent, 'wjpjc', '违禁品检查<font color="red">（ '+wjpjcCount+' ）</font>', 460, 270, 100, 105, "style4");
        var v5 = graph.insertVertex(parent, 'dyxgflws', '打印相关法律文书<font color="red"></font>', 460, 400, 100, 105, "style5");
        var v6 = graph.insertVertex(parent, 'jkjc', '健康检查<font color="red"></font>', 460, 530, 100, 105, "style6");

        var v7 = graph.insertVertex(parent, 'dagd', '档案归档<font color="red"></font>', 700, 250, 100, 105, "style7");

        // 连线
        graph.insertEdge(parent, null, '',v1, v2 , "edgeStyle=elbowEdgeStyle;");
        graph.insertEdge(parent, null, '',v1, v3 , "edgeStyle=elbowEdgeStyle;");
        graph.insertEdge(parent, null, '',v1, v4 , "edgeStyle=elbowEdgeStyle;");
        graph.insertEdge(parent, null, '',v1, v5 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线
        graph.insertEdge(parent, null, '',v1, v6 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线

        graph.insertEdge(parent, null, '',v2, v7 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线
        graph.insertEdge(parent, null, '',v3, v7 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线
        graph.insertEdge(parent, null, '',v4, v7 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线
        graph.insertEdge(parent, null, '',v5, v7 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线
        graph.insertEdge(parent, null, '',v6, v7 , "edgeStyle=elbowEdgeStyle;");//加上edgeStyle=elbowEdgeStyle;是圆角连线





        //添加事件
        graph.addListener(mxEvent.CLICK, function(sender, evt) {
            var cell11 = evt.getProperty('cell');
            //graph.setCellStyles(fillColor,black);
            if(cell11==null){
                $("#pictureId").css({"display":"none"});
                return ;
            }else if(cell11.id=='csdj'){
                window.location.href="/jls_csdj/index.html";
            }else if (cell11.id=='wpth'){
                window.location.href="/jls_wpth/index.html";
            }else if (cell11.id=='xjth'){
                window.location.href="/jls_xjth/index.html";
            }else if (cell11.id=='wjpjc'){
                window.location.href="/jls_wjpjc/index.html";
            }else if (cell11.id=='dyxgflws'){
                window.location.href="/jls_dyflxgws/index.html";
            }else if (cell11.id=='jkjc'){
                window.location.href="/jls_jcjc/index.html";
            }else if (cell11.id=='dagd'){
                window.location.href="/jls_dagd/index.html";
            }
        });
        //鼠标悬浮效果
        var track = new mxCellTracker(graph);
        var self = this;
        track.mouseMove = function(sender, me) {
            var cell1 = this.getCell(me);
            if(cell1==null){
                $("#pictureId").css({"display":"none"});
                return ;
            }else{
                if(cell1.id=="tscldj"){
                    $("#pictureId").css({"display":"block","left":"250px","top":"170px"});
                    $("#pictureId").html("投诉处理登记登记！");
                }else if (cell1.id=="ldsp"){
                    $("#pictureId").css({"display":"block","left":"550px","top":"170px"});
                    $("#pictureId").html("领导审批！");
                }else if (cell1.id=="cldjcljg"){
                    $("#pictureId").css({"display":"block","left":"850px","top":"170px"});
                    $("#pictureId").html("登记处理结果！");
                }
            }
        };
        //
        function bodyScale(){
            var main = document.getElementById("main"); //获取id="main"
            var devicewidth=document.documentElement.clientWidth;
            var scale=devicewidth/1275;//除去当前流量器分辨率1275
            main.style.zoom=scale;//zoom是设置或检索对象的缩放比例.
        }
        window.onload=window.onresize=function(){
            bodyScale();
        }
    </script>

    <div class="easyui-tabs" id="tt" data-options="fit:true" style="width: 100%;border: solid #fafafa">
        <div title=出所流程图 style="padding: 10px;">
        </div>

    </div>

    <script type="text/javascript">
        //自适应任何设备屏幕
        function bodyScale(){
            var main = document.getElementById("main"); //获取id="main"
            var devicewidth=document.documentElement.clientWidth;
            var scale=devicewidth/1275;//除去当前流量器分辨率1275
            main.style.zoom=scale;//zoom是设置或检索对象的缩放比例.
        }
        window.onload=window.onresize=function(){
            bodyScale();
        }
    </script>
</body>
</html>
